React Native项目实践总结

想想有一段时间没更新博客了，其中有工作稍微忙了点的原因，其实作者找了一个项目一直在练习。另一方面作者购买了一个域名并且通过辛苦努力搭建了一个自己的小窝，欢迎各位的光临哦！（作者的小窝传送门），以后写的文章将在自己的小窝作为首发了。

项目背景

本人练习的项目是一个通过豆瓣公共api实现了电影相关的一个APP。主要功能有推荐、搜索、登录、详情等，由于是刚学习完RN第一个练习项目，所以难免有些生疏和技术的不熟练，哪里有些的不好的地方希望大家可以不吝赐教。本项目是通过两个阶段完成的：第一阶段使用RN自带的控件比如TabBarIOS、NavigatorIOS、Button、Image等；第二阶段重构使用了比较火的一些第三方控件react-native-navigation、react-native-img-cache、react-native-button。

项目视频介绍

项目视频介绍.gif

使用到的技术

ES6 其中主要使用的是箭头函数这个特性，项目中代码其实使用了两种，我注释掉了一种。两种最大的区别就是箭头函数自动绑定this
Flex 一种布局方式
JavaScript
Objective-c
项目详细介绍
1、项目初始化
由于使用到了react-native-navigation第三方框架导航，所以APP代码还有有挺大区别的。
直接在index.os.js中将所有的代码注释掉仅仅使用如下一句即可

1	import app from './app/App'

1.1、App.js源码
App其实一方面registerScreens()方法注册了所有的Component，另一方面使用了Navigation.startTabBasedApp启动了整个App，实现了UITabBar的效果

import {Platform} from 'react-native';
import {Navigation} from 'react-native-navigation';
import {registerScreens,registerScreenVisibilityListener} from './Screens/index';
import Icons from './Assets/Icon';
// screen related book keeping
registerScreens();
registerScreenVisibilityListener();
const tabs = [{
        label: '推荐',
        screen: 'com.fof.FlyOceanMovies.MovieList',
        icon: {uri:Icons.star,scale:4.6},
        title: '热门推荐',
    },
    {
        label: '北美票房',
        screen: 'com.fof.FlyOceanMovies.USBoxList',
        icon: {uri:Icons.featured,scale:1.1},
        title: '北美票房',
    },
    {
        label: '搜索',
        screen: 'com.fof.FlyOceanMovies.SearchForm',
        icon: {uri:Icons.search,scale:1.2},
        title: '搜索',
    }
    ];
// this will start our app
Navigation.startTabBasedApp({
    tabs,
    animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
    tabsStyle: {
        tabBarBackgroundColor: '#003a66',
        tabBarButtonColor: '#ffffff',
        tabBarSelectedButtonColor: '#ff505c',
        tabFontFamily: 'BioRhyme-Bold',
    },
    appStyle: {
        tabBarBackgroundColor: '#003a66',
        navBarButtonColor: '#ffffff',
        tabBarButtonColor: '#ffffff',
        navBarTextColor: '#ffffff',
        tabBarSelectedButtonColor: '#ff505c',
        navigationBarColor: '#003a66',
        navBarBackgroundColor: '#003a66',
        statusBarColor: '#002b4c',
        tabFontFamily: 'BioRhyme-Bold',
    },
});

2、各个子页面
MovieList：首页
USBoxList：北美票房
SearchForm：搜索
MovieDetail：详情
Login：登录界面
SearchResult：搜索结果页
Main.js：相当于CSS样式，其实就是布局

其中MovieList自己实现了相当于iOS的segmentcontrol的效果使用到了ReactNative中的动画。

下图详细概括了RN中动画内容，所谓得此图得天下。哈哈

React Native 动画.png

还有一些其他的关注点我都在代码加了注释，大家有兴趣可以详细看一下代码，由于里边包括了我两个阶段的所有代码，所以大家要耐心看哦。

总结

学习React Native有一段时间了，写这个项目其实不是很熟练，踩了不少坑，写的也不是非常的快。但是没遇到一个坑都停下来好好思考复习巩固自己没掌握的知识，让自己也提升了不少。所以万里之行始于足下，掌握知识的最快方法就是行动起来，找个项目从0开始，完整的写完一个项目。不仅验证了自己所学的知识，同时在写项目中能够学到之前没学到的知识,也巩固了自己的新知识。

项目完整代码

项目背景

项目视频介绍

使用到的技术

项目详细介绍

总结